<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Aria-touchpassthrough Keypad</title>

    <style>
      button {
          margin: 3px;
          border: 1px solid #999;
          border-radius: 10px;
          display: inline-block;
          text-align: center;
      }

      .key {
          width: 60px;
          height: 30px;
      }

      .enter {
          width: 200px;
          height: 40px;
      }

      input {
          font-size: 16pt;
          width: 200px;
          margin: 5px;
      }
   </style>

  </head>
  <body>

    <div>
      <input autofocus id="entry">
    </div>

    <div class="keypad">
      <div class="row">
        <button class="key" aria-touchpassthrough="true">1</button>
        <button class="key" aria-touchpassthrough="true">2</button>
        <button class="key" aria-touchpassthrough="true">3</button>
      </div>
      <div class="row">
        <button class="key" aria-touchpassthrough="true">4</button>
        <button class="key" aria-touchpassthrough="true">5</button>
        <button class="key" aria-touchpassthrough="true">6</button>
      </div>
      <div class="row">
        <button class="key" aria-touchpassthrough="true">7</button>
        <button class="key" aria-touchpassthrough="true">8</button>
        <button class="key" aria-touchpassthrough="true">9</button>
      </div>
      <div class="row">
        <button class="key" aria-touchpassthrough="true">*</button>
        <button class="key" aria-touchpassthrough="true">0</button>
        <button class="key" aria-touchpassthrough="true">x</button>
      </div>
      <div class="row">
        <button class="enter" id="dial">Dial</button>
      </div>
    </div>

    <script>
      let entry = document.getElementById('entry');
      document.querySelectorAll('button.key').forEach((e) => {
        e.addEventListener('click', () => {
          let key = e.innerText;
          if (key == 'x') {
            entry.value = entry.value.substr(0, entry.value.length - 1);
          } else {
            entry.value += key;
          }
          entry.focus();
        });
      });
    </script>
  </body>
</html>
